<template>
    <!-- 促销单品 -->
    <div class="promotion">
        <!-- 轮播页面 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in promotion.banner" :key="item.id">
                <img :src="item.img" alt="" />
            </van-swipe-item>
        </van-swipe>

        <!-- 文字信息 -->
        <tan-pin>促销单品</tan-pin>

        <!-- 商品条页面 -->
        <router-link :to="`/details/${item.id}`" class="benefit" v-for="item in promotion.list" :key="item.id">
            <img :src="item.image" alt="" />
            <div class="right">
                <span class="top">{{ item.store_name }}</span>
                <div>促销价{{ item.price }}</div>
                <p>
                    <span>日常价： ￥{{ item.ot_price }}</span>
                    <i>仅剩: {{ item.stock }}{{ item.unit_name }}</i>
                </p>
            </div>
        </router-link>

        <!-- 加载更多 -->
        <div class="more" ref="more" @click="mores">{{ add ? "点击加载更多。。。" : "给不了更多了。。。。" }}</div>
    </div>
</template>

<script>
import TanPin from "./TanPin.vue";
export default {
    components: { TanPin },
    data() {
        return {
            promotion: {},
            limitIndex: 5, // 第一次加载5条
            lengths: 0, // 旧数据的长度
            add: true, //记录当前是否是可以加载新数据的状态
        };
    },
    methods: {
        getPromotion(index) {
            this.axios.get(`/groom/list/4?page=1&limit=${index}`).then((re) => {
                console.log(re);
                // 判断当前的数据是不是小于 新增的数据
                if (this.lengths < re.list.length) {
                    this.lengths = re.list.length;
                    this.promotion = re;
                } else {
                    // 当前的数据不小于新数据，不在加载
                    this.add = false;
                }
            });
        },

        // 点击加载更多
        mores() {
            // 判断当前是否是可以加载新数据的状态
            if (!this.add) return;
            this.limitIndex += 5;
            this.getPromotion(this.limitIndex);
        },

        // 滚动加载更多
        scrollfn() {
            let a = document.scrollTop || document.documentElement.scrollTop;
            let b = window.innerHeight;
            let c = this.$refs.more.offsetTop;
            if (a + b + 50 >= c) {
                this.mores();
            }
        },
    },
    created() {
        // 页面加载，获取第一次的数据
        this.getPromotion(this.limitIndex);
    },

    mounted() {
        // 滚动获取更多
        window.addEventListener("scroll", this.scrollfn);
    },

    // 干掉全局滚动事件
    beforeDestroy() {
        window.removeEventListener("scroll", this.scrollfn);
    },
    beforeRouteLeave(to, from, next) {
        window.removeEventListener("scroll", this.scrollfn);
        next();
    },
};
</script>

<style lang="scss" scoped>
// 轮播部分
.my-swipe {
    height: 141px;
}

// 促销单品
.benefit {
    display: flex;
    margin: 0px 10px;
    border-bottom: 1px solid rgba(129, 127, 127, 0.1);
    transform: translateY(-10px);
    img {
        width: 94px;
        height: 94px;
        margin: 10px 0 15px 0;
        border-radius: 12px;
        margin-right: 10px;
    }
    div {
        display: flex;
        height: 94px;
        justify-content: space-between;
        flex-direction: column;
        .top {
            font-size: 16px;
            width: 250px;
            margin-top: 10px;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
        }
        div {
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            width: 127.5px;
            text-align: center;
            color: #fff;
            background: #ff5437;
            border-top-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        p {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: rgb(144, 139, 139);
            span {
                text-decoration: line-through;
            }
        }
    }
}
// 加载更多
.more {
    line-height: 50px;
    text-align: center;
}
</style>
